<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="../css/jsdeliverbootstrap.min.css">
<!--    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"-->
<!--          integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">-->
    <link rel="stylesheet" href="../css/pet-store-plus.css">

    <link rel="stylesheet" href="/css/staticfilebootstrap.min.css">
<!--    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">-->
    <script src="/js/chart.js"></script>
<!--    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>-->
    <title>用户管理</title>
</head>
<body>
<!--<div class="top">-->
<!--    <a class="text-right" href="/admin/signOut">Sign Out</a>-->
<!--</div>-->

<!--<div class="sidebar" id="sidebar">-->
<!--    <a class="option" href="/admin/showData" >首页</a>-->
<!--    <a class="option" href="/admin/items">商品管理</a>-->
<!--    <a class="option" href="/admin/orders">订单管理</a>-->
<!--    <a class="option active" href="/admin/user">用户管理</a>-->
<!--    <a class="option" href="/admin/message">消息</a>-->
<!--    <a class="option" href="/admin/admin">权限管理</a>-->
<!--</div>-->

<div th:replace="seller_commom"></div>


<div class="content" id="content">
    <p class="text-left" style="font-size: x-large;margin-top: 20px;">用户列表</p>
    <div style="grid-row: span 1;grid-column: span 5"></div>
    <div class="tab-bg">

        <div id="myModal" class="modal">

            <div class="modal-content">
                <label id="rest-username"> </label>
                <div class="pw-row">
                    <label for="newPw" id="newPwLb">新密码</label>
                    <input id="newPw" type="text" placeholder="input new password">
                </div>

                <div class="button-grp">
                    <button type="button" onclick="resetPw()"class="Button" >确定重置</button>
                    <button type="button" onclick="closeModal()"class="Button" style="font-size: large;color: #222222">取消</button>
                </div>

            </div>
        </div>
        <table class="Administrators_tab" th:fragment="Administratorstab" id="Administratorstab">
            <caption></caption>
            <thead>
            <tr>
                <th>id</th>
                <th>email</th>
                <th>firstname</th>
                <th>lastname</th>
                <th>addr1</th>
                <th>addr2</th>
                <th>city</th>
                <th>state</th>
                <th>zip</th>
                <th>country</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="users:${userList}">
                <td name="name" th:text="${users.username}"></td>
                <td name="email" th:text="${users.email}"></td>
                <td name="firstname" th:text="${users.firstname}"></td>
                <td name="lastname" th:text="${users.lastname}"></td>
                <td name="addr1" th:text="${users.addr1}"></td>
                <td name="addr2" th:text="${users.addr2}"></td>
                <td name="city" th:text="${users.city}"></td>
                <td name="state" th:text="${users.state}"></td>
                <td name="zip" th:text="${users.zip}"></td>
                <td name="country" th:text="${users.country}"></td>

                <td style="text-align: center; vertical-align: middle;">
                    <button class="Button" style="display: inline-block;" onclick="showResetPasswordForm(this)">密码重置</button>
                </td>
            </tr>
            </tbody>
        </table>
    </div>


</div>

<script>

    var row;
    function showResetPasswordForm(button) {
        // 创建弹窗元素
         row=button.parentNode.parentNode;
        var username=row.querySelector('td:nth-child(1)').innerText;
        var lb=document.getElementById('rest-username');


        lb.innerHTML='username:'+username;
        var modal=document.getElementById('myModal');
        modal.style.display="block";
    }
    function closeModal(){
        console.log('关闭弹窗');
        var modal=document.getElementById('myModal');
        var input=document.getElementById('newPw');
        input.value='';
        modal.style.display="none";
    }
    function resetPw(){
        console.log('reset')
        var username=row.querySelector('td:nth-child(1)').innerText;
        var password=document.getElementById('newPw').value;
        console.log('username='+username+'  password='+password);
        var url='/admin/user/resetPassword';
        const data = {
            userId: username.toString(),
            password: password
        };
        fetch(url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ userId: username, password: password })
        })
            .then(response => response.json())
            .then(data => {
                console.log(data);
            })
            .catch(error => {
                console.error('请求发送失败:', error);
            });
        closeModal();
    }
</script>
</body>
</html>